<template>
  <div class="hotel">
    <swiper height='200px'
            width="80%"
            class="swiper"
            :interval="3000"
            auto>
      <swiper-item v-for="(item, index) in list"
                   :key="index"
                   class="swiper_item">
        <img :src="item.img"
             height="100%"
             width="100%">
      </swiper-item>
    </swiper>
    <div class="hotel_info">
      <div class="name">
        {{hotel.name}}
        <!-- <span>MORE</span> -->
      </div>
      <div class="flex between">
        <p class="col_999 address ellipsis mr20"> {{hotel.address}}</p>
        <div class="contact ">
          <img src="../../assets/image/go.png"
               width="25"
               class="mr20"
               @click="go">
          <img src="../../assets/image/tel.png"
               @click="call"
               width="25">
        </div>
      </div>
    </div>
    <div class="datechoose flex between"
         @click="check()">
      <div class="box">
        <p class="col_sub">入住</p>
        <div class="fz28">
          <span>{{value[0] |month}}月{{value[0] |day}}日</span>
          <span>{{value[0] |week}}</span>
        </div>
      </div>
      <div class="time_around flex">{{value|days}}晚</div>
      <div class="box">
        <p class="col_sub t-r">离店</p>
        <div class="fz28">
          <span>{{value[1] |month}}月{{value[1] |day}}日</span>
          <span>{{value[1] |week}}</span>
        </div>
      </div>
    </div>
    <div class="room_list">
      <div class="room"
           v-for="(ite,indx) in hotel.roomList"
           :key="indx">
        <img :src="ite.file | imgUrl"
             class="bora_10"
             width="100%"
             @click="$router.push({path:'/room',query:{ roomId:ite.id }})">
        <div class="info fz30 flex between">
          <div>
            <p class="fwb">{{ite.category}}</p>
            <p class="col_mian ">原价￥{{ite.originalPrice}}(会员价￥{{ite.price}})</p>
          </div>
          <div class="status">
            <p class="book"
               v-if="ite.bookAble"
               @click="$router.push({path:'/room',query:{ roomId:ite.id }})"> 预定</p>
            <p class="date"
               v-else
               @click="check(ite.fullHouseDays) ">查看哪天有房 </p>
          </div>
        </div>
      </div>
    </div>
    <popup v-model="dateShow">
      <inline-calendar v-model="value"
                       class="isfull"
                       @on-change='choose'
                       disable-past
                       :render-function="isFull">
      </inline-calendar>
    </popup>
  </div>
</template>
<script>
import { Swiper, SwiperItem, InlineCalendar, Popup } from 'vux'
import * as API from '../../api'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Swiper, SwiperItem, InlineCalendar, Popup
  },
  data () {
    return {
      list: [],
      hotel: '',
      tel: '',
      lng: '',
      lat: '',
      city: '',
      dateShow: false,
      value: [],
      checkDate: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'addr', 'date'])
  },
  created () {
    this.value[0] = this.date[0]
    this.value[1] = this.date[1]
    this.searchhotel()
  },
  methods: {
    ...mapActions(['dateChoose']),
    searchhotel () {
      this.$http.get(API.hotelDetail, {        params: {
          hotelId: this.$route.query.hotelId,
          startTime: this.date[0],
          endTime: this.date[1]
        }      })
        .then(res => {
          this.hotel = res.data
          this.list = res.data.fileList.map((item) => ({
            img: `https://www.felixmantuoluo.com/${item.url}`
          }))
          this.roomList = res.data.roomList
          this.tel = this.hotel.mobile
          this.lng = this.hotel.longitude
          this.lat = this.hotel.latitude
          this.city = this.hotel.city
        })
        .catch(err => {
          console.log(err)
        })
    },
    call () {
      window.location.href = 'tel:// ' + this.tel
    },
    go () {
      // 定位地址
      window.location.href = `http://api.map.baidu.com/geocoder?location=${this.lat},${this.lng}&coord_type=bd09ll&output=html&src=webapp.baidu.openAPIdemo`
      // 交通
      // let { lng, lat, city } = this.address
      // window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${lat},${lng}|name:我位置&destination=latlng:${this.lat},${this.lng}|name:${this.hotel.name}&mode=driving&origin_region=${city}&destination_region=${this.city}&output=html&src=najingrenmei.mesdear`
    },
    choose (value) {
      if (this.value.length > 2) this.value.splice(0, 2)
      if (Date.parse(new Date(this.value[0])) > Date.parse(this.value[1])) this.value.splice(1, 1)
      if (this.value.length === 2) {
        this.dateShow = false
        this.searchhotel()
        this.dateChoose(value)
      }
    },
    check (date) {
      this.dateShow = true
      if (date) {
        this.checkDate = date
      } else {
        this.checkDate = ''
      }
    },
    isFull (line, index, data) {
      if (this.checkDate.length) {
        const sign = this.checkDate.indexOf(data.formatedDate)
        if (sign > -1) {
          return '满'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.hotel {
  @extend .bg_fff;
}
.hotel_info {
  margin: 30px 30px 0;
  .name {
    font-size: 32px;
    @extend .fwb;
    span {
      background: rgba(27, 139, 224, 0.3);
      border-radius: 2px;
      color: #4285f6;
      padding: 2px 20px;
      margin-left: 10px;
      font-weight: normal;
      font-size: 12px;
    }
  }
  .address {
    width: 75%;
    font-size: 26px;
    margin-top: 10px;
  }
}
.datechoose {
  margin: 20px 30px;
  @extend .border;
  padding: 30px;
}
.room_list {
  .room {
    padding: 20px;
    @extend .bor_b;
    &:last-child {
      border: none;
    }
    .status {
      color: #fff;
      border-radius: 10px;
      font-size: 20px;
      .book {
        padding: 10px 40px;
        background-image: linear-gradient(227deg, #40b9ff, #4285f6);
      }
      .date {
        padding: 10px;
        background: #cecece;
      }
    }
  }
}
/deep/ .inline-calendar td {
  height: 100px;
}
/deep/ .inline-calendar td > span.vux-calendar-each-date {
  height: 0 !important;
  margin-top: -10px;
  border: 0 !important;
}
/deep/ .inline-calendar td > div {
  margin-top: -10px;
}
</style>
